<template>
  <div>
    <!--登录头像显示-->
    <div class="login-header">
      <div class="login-image">
        <img src="../../../assets/images/login/login.jpg" width="80px" height="80px"/>
      </div>
    </div>
    <!--登录输入框显示-->

    <van-cell-group >
      <van-field
        v-model="username"
        clearable
        left-icon="edit"
        placeholder="请输入你的手机号码"
        @click-right-icon="$toast('请输入11位本人手机号码')"
        v-validate="{ required: true }"
        name="手机号码">
      </van-field>
      <van-field
        v-model="code"
        center
        clearable
        left-icon="warning-o"
        placeholder="请输入短信验证码"
        name="短信验证码"
        v-validate="{ required:true}"
      >
        <van-button slot="button" size="small" type="primary" v-on:click="getCode">发送验证码</van-button>
      </van-field>
      <van-button
        size="large"
        type="primary"
        :loading="isLogining"
        @click="loginSubmit"
      >登录</van-button>
    </van-cell-group>
  </div>
</template>

<script>
import { setLocalStorage } from '@/common/utils/local-storage'
import { Popup, Toast, Field, CellGroup, Button } from 'vant'

export default {
  name: 'login-request',
  data () {
    return {
      username: '',
      code: '',
      isLogining: false,
      vf_id: null
    }
  },

  methods: {
    async validate () {
      const result = await this.$validator.validate()
      if (!result) {
        const errMsg = this.errors.items[0].msg
        Toast(errMsg)
        throw new Error(errMsg)
      }
    },
    async getCode () {
      const params = { 'receiver': this.username, 'recaptcha_response': true }
      const { data } = await this.$api.account.verificationCreate(params)
      console.log(data)
      if (data.code !== 200) {
        throw new Error(data.desc)
      }
      this.vf_id = data.data.id
    },
    async login () {
      const loginData = {
        username: this.username,
        code: this.code,
        vf_id: this.vf_id,
        source_id: this.$route.query.source_id || 0,
        source_type: this.$route.query.source_type || 0
      }
      const { data } = await this.$api.auth.login(loginData)
      console.log(data)
      if (data.code !== 200) {
        throw new Error(data.desc)
      }
      const userInfo = {
        token: data.data.token,
        username: data.data.user.username,
        headimgurl: data.data.headimgurl,
        nickname: data.data.nickname,
        openid: data.data.openid,
        phone: data.data.phone
      }
      console.log(userInfo)
      setLocalStorage(userInfo)
    },
    async loginSubmit () {
      this.isLogining = true
      try {
        await this.validate()
        await this.login()
        this.isLogining = false
        Toast.success('登陆成功')
        this.routerRedirect()
      } catch (err) {
        console.log(err.message)
        this.isLogining = false
        Toast.fail(err.message)
      }
    },
    routerRedirect () {
      const { query } = this.$route
      this.$router.replace({
        path: query.redirect || 'home',
        query: query
      })
    }
  },

  components: {
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Popup.name]: Popup
  }
}
</script>

<style scoped>
  /*登录上半部分*/
.login-header{
  width: 100%;
  height: 200px;
}
.login-image{

  padding-top:80px;
  display: flex;
  flex-direction: row;
  /*觉得主轴的方向 即文本是从右到左(row-reverse)还是左到右row 垂直column*/
  justify-content: center;
}
img{
  border-radius: 50px;
}
.van-cell-group {
  margin: 0 20px 0 20px;
}
.register {
    padding-top: 40px;
    color: $font-color-gray;
  a {
    color: $font-color-gray;
  }
  > div {
    width: 50%;
    box-sizing: border-box;
    padding: 0 20px;
  }
  .connect {
  @include one-border(right);
    text-align: right;
  }
}
</style>
